<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
            <el-form-item label="申请人姓名" prop="uname">
                <el-input v-model="queryParams.uname" placeholder="请输入申请人姓名" clearable size="small"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="queryParams.phone" placeholder="请输入银行预留手机号" clearable size="small"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="银行卡号" prop="cardNumber">
                <el-input v-model="queryParams.cardNumber" placeholder="请输入银行卡号" clearable size="small"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="开户行信息" prop="bankInformation">
        <el-input
          v-model="queryParams.bankInformation"
          placeholder="请输入开户行信息"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="退款金额" prop="refundAmount">
        <el-input
          v-model="queryParams.refundAmount"
          placeholder="请输入退款金额"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
            <el-form-item label="退款状态" prop="refundStatus">
                <el-select v-model="queryParams.refundStatus" placeholder="请选择退款状态" clearable size="small">
                    <el-option label="退款中" value="1" />
                    <el-option label="退款完成" value="2" />
                      <el-option label="驳回" value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="department">
                <template>
                    <el-select v-model="queryParams.deptId" collapse-tags style="margin-left: 20px;width: 200px"
                        placeholder="请选择部门">
                        <el-option v-for="item in options" :key="item.deptId" :label="item.deptName" :value="item.deptId">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['apply:RefundApply:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['apply:RefundApply:edit']"
        >修改</el-button>
      </el-col> -->
            <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['apply:RefundApply:remove']"
        >删除</el-button>
      </el-col> -->
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['apply:RefundApply:export']">导出</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="RefundApplyList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column fixed label="序号" align="center">
                <template slot-scope="scope">
                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + (scope.$index + 1) }} </span>
                </template>
            </el-table-column>
            <el-table-column label="申请人姓名" align="center" prop="uname" />
            <el-table-column label="银行预留手机号" align="center" prop="phone" />
            <el-table-column label="银行卡号" align="center" prop="cardNumber" />
            <el-table-column label="开户行信息" align="center" prop="bankInformation" />
            <el-table-column label="退款金额" align="center" prop="refundAmount" />
            <el-table-column label="退款原因" align="center" prop="refundReason" />
            <!-- <el-table-column label="退款状态" align="center" prop="refundStatus" /> -->
            <el-table-column label="退款状态" align="center" prop="refundStatus">
                <template slot-scope="scope">
                    <!-- <span v-if="scope.row.type == 1">充值</span> -->
                    <span v-if="scope.row.refundStatus == 1">退款中</span>
                    <span v-if="scope.row.refundStatus == 2">退款完成</span>
                    <span v-if="scope.row.refundStatus == 3">驳回</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handlePrint(scope.row)"
                        v-hasPermi="['apply:RefundApply:edit']">预览打印</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['apply:RefundApply:edit']" :disabled="scope.row.refundStatus != 1">审核</el-button>
                    <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['apply:RefundApply:remove']">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加或修改RefundApplyController对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="申请人姓名" prop="uname">
                    <el-input v-model="form.uname" placeholder="请输入申请人姓名"  disabled/>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入银行预留手机号"  disabled/>
                </el-form-item>
                <el-form-item label="银行卡号" prop="cardNumber">
                    <el-input v-model="form.cardNumber" placeholder="请输入银行卡号" disabled/>
                </el-form-item>
                <el-form-item label="开户行信息" prop="bankInformation">
                    <el-input v-model="form.bankInformation" placeholder="请输入开户行信息" disabled/>
                </el-form-item>
                <el-form-item label="退款金额" prop="refundAmount">
                    <el-input v-model="form.refundAmount" placeholder="请输入退款金额" disabled/>
                </el-form-item>
                <el-form-item label="退款原因" prop="refundReason">
                    <el-input v-model="form.refundReason" type="textarea" placeholder="请输入内容" disabled/>
                </el-form-item>
                <el-form-item label="退款状态">
                    <el-radio-group v-model="form.refundStatus">
                        <el-radio :label="1">退款中</el-radio>
                        <el-radio :label="2">退款完成</el-radio>
                         <el-radio :label="3">驳回</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.refundStatus == 3"  label="驳回原因" prop="rejectRes">
                    <el-input v-model="form.rejectRes" type="textarea" placeholder="请输入驳回原因" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 预览打印 -->
        <el-dialog :title="print.title" :visible.sync="print.open" width="800px" append-to-body>
            <div id="printMe" class="invantBox">
                <div class="header">关于退回州党委机关食堂饭卡余额的申请</div>
                <div class="content">
                    <p class="company_center" style="font-size: 20px;">州党委机关服务中心：</p>
                    <p class="custom_info">
                        兹有  <span>{{ printObj.uname }}</span> , 手机号为 <span>{{ printObj.phone }}</span>, 余额为: <span>{{ printObj.refundAmount }} 元</span> ,
                        因 <span>{{ printObj.refundReason }}</span>
                    </p>
                    <p class="custom_content">
                        现申请将余额全部退回，收款人姓名：<span>{{ printObj.uname }}</span>,   开户行: <span>{{ printObj.bankInformation }}</span>
                        , 卡号：<span>{{ printObj.cardNumber }}</span>。
                    </p>
                    <p class="custom_content">望领导批准为盼！</p>
                    <p class="custom_content">管理员审核余额: <span>￥ {{ printObj.refundAmount }} 元</span> （ 大写：<span>{{ printObj.upperCase }}</span> ）。 </p>
                    <p class="sign">财务审核签字：</p>
                    <p class="sign">申请人确认签字：{{ printObj.uname }}</p>
                    <p class="sign">主管领导审批签字：</p>
                </div>
                <div class="footer">
                    <p>申请人所在单位：<span>{{ printObj.deptName }}</span></p>
                    <P>申  请  时  间：<span>{{ printObj.chDate }}</span></P>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-print="printOption">打印</el-button>
                <el-button @click="print.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listRefundApply, getRefundApply, delRefundApply, addRefundApply, updateRefundApply, exportRefundApply, getRefundPrint } from "@/api/apply/RefundApply";
import { listDept } from "@/api/system/dept";

import print from 'vue-print-nb';

export default {
    name: "RefundApply",
    directives: {
        print
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // RefundApplyController表格数据
            RefundApplyList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            options: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                uname: undefined,
                phone: undefined,
                cardNumber: undefined,
                bankInformation: undefined,
                refundAmount: undefined,
                refundReason: undefined,
                refundStatus: undefined,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                uname: [
                    { required: true, message: "申请人姓名不能为空", trigger: "blur" }
                ],
                phone: [
                    { required: true, message: "银行预留手机号不能为空", trigger: "blur" }
                ],
                cardNumber: [
                    { required: true, message: "银行卡号不能为空", trigger: "blur" }
                ],
                refundAmount: [
                    { required: true, message: "退款金额不能为空", trigger: "blur" }
                ],
                refundReason: [
                    { required: true, message: "退款原因不能为空", trigger: "blur" }
                ],
                refundStatus: [
                    { required: true, message: "1.申请提交 2退款中。3 退款完成不能为空", trigger: "blur" }
                ],
            },
            print: {
                title: `打印`,
                open: false
            },
            printObj: {},
            printOption: {
                id: `printMe`,
                preview: false,
                previewTitle: `打印申请预览`,
                previewPrintBtnLabel: `预览结束开始打印`
            }
        };
    },
    created() {
        this.getList();
        this.getSecondDeptlist();
    },
    methods: {
        /** 获取二级部门列表 */
        getSecondDeptlist() {
            this.loading = true;
            listDept().then((response) => {
                this.options = response.data;
            });
        },
        /** 查询RefundApplyController列表 */
        getList() {
            this.loading = true;
            listRefundApply(this.queryParams).then(response => {
                this.RefundApplyList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                uname: undefined,
                phone: undefined,
                cardNumber: undefined,
                bankInformation: undefined,
                refundAmount: undefined,
                refundReason: undefined,
                refundStatus: "0",
                createTime: undefined,
                updateTime: undefined
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加退款申请";
        },
        // doc docx 文本预览下载
        handlePrint(row) {
            this.reset();
            const id = row.id || this.ids;
            getRefundPrint(id).then(response => {
                this.printObj = response.data;
                this.print.open = true;
                this.print.title = "打印";
                console.log(`VAL::::::::::getRefundPrint::::::::`, response);
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getRefundApply(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改退款申请";
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        updateRefundApply(this.form).then(response => {
                            if (response.code == 200 || response.code == 0) {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            }
                        });
                    } else {
                        addRefundApply(this.form).then(response => {
                            if (response.code == 200 || response.code == 0) {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            }
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm('是否确认删除RefundApplyController编号为"' + ids + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delRefundApply(ids);
            }).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
            }).catch(function () { });
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出所有数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return exportRefundApply(queryParams);
            }).then(response => {
                this.download(response.data);
            }).catch(function () { });
        }
    }
};
</script>

<style lang="scss" scoped>
.invantBox {
    padding: 30px 0 30px 50px;
    margin: 0 auto;
    .header {
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        padding-top: 50px;
    }
    .content {
        padding: 50px 0 20px;
        .custom_info {
            font-size: 18px;
            text-indent: 2em;
            line-height: 40px;
            span {
                display: inline-block;
                text-align: center;
                text-indent: 0;
                padding: 0 3px;
                border-bottom: 1px solid #000;
            }
        }
        .custom_content {
            font-size: 18px;
            line-height: 40px;
            span {
                display: inline-block;
                text-align: center;
                text-indent: 0;
                padding: 0 3px;
                border-bottom: 1px solid #000;
            }
        }
        .sign {
            font-size: 18px;
            line-height: 60px;
            text-indent: 3em;
        }
    }

    .footer {
            p {
                text-align: right;
                padding-right: 60px;
                font-size: 17px;
                span {
                    display: inline-block;
                    text-align: center;
                    text-indent: 0;
                    padding: 0 3px;
                    border-bottom: 1px solid #000;
                }
            }
        }
}
</style>></style>
